<template>
  <Modal :editData="editUserData" :isOpen="isOpen" @success="onSuccess" @cancel="onCancel"></Modal>
  <a-form ref="searchRef" layout="inline" :model="searchObj">
    <a-form-item label="牧场名称" name="ranchName">
      <a-input v-model:value="searchObj.ranchName"></a-input>
    </a-form-item>
    <a-form-item label="状态" name="ranchStatus" class="statusForm">
      <a-select
        v-model:value="searchObj.ranchStatus"
        :options="ranchStatusOptions"
        :default-value="defaultRanchStatus"
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSearch">搜索</a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleReset">重置</a-button>
    </a-form-item>
  </a-form>
  <a-button type="primary" style="margin-top: 12px" @click="handleOpenFirst">新增牧场</a-button>
  <a-table :columns="columns" :pagination="pagination" :data-source="dataSource" @change="onTableChange">
    <template #headerCell></template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'ranchStatus'">
        {{ record.ranchStatus === 1 ? '启用' : '停用' }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <!-- <router-link :to="{ path: '/base-manage/ranch-manage/queryRanch' }"> -->
          <a-button @click="getQueryRecord(record)">查看 </a-button>
          <!-- </router-link> -->
          <a-button type="primary" @click="() => handleEdit(record)">修改</a-button>
          <a-popconfirm
            title="确认要修改状态吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="() => editStatus(record)"
          >
            <a-button danger>
              {{ record.ranchStatus === 0 ? '启用' : '停用' }}
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>

  <!-- <QueryRanchData v-if="showChild" :queryData="queryDataOne.value"></QueryRanchData> -->
</template>
<script setup>
import Modal from './addEditRanch.vue';
import { ref } from 'vue';
const isOpen = ref(false);
const searchRef = ref(null);
const searchObj = ref({});
const editUserData = ref({});
const dataSource = ref([]);
const router = useRouter();
import RanchManage from '@/api/ranch';
import { message } from 'ant-design-vue';

// 点击按钮打开
const handleOpenFirst = () => {
  // debugger;
  isOpen.value = true;
  // router.push({path:''})
  editUserData.value = {}; // 清空数据以便新增
};
// 编辑
const handleEdit = (editRecord) => {
  isOpen.value = true;
  editUserData.value = { ...editRecord };
  console.log(editUserData.value);
};
// 分页
const pagination = ref({
  pageSizeOptions: ['10', '20'],
  showSizeChanger: true,
  current: 1,
  pageSize: 10,
  total: 0,
});

// 获取数据
const getData = async () => {
  try {
    const res = await RanchManage.getRanchList({
      pageNumber: pagination.value.current,
      pageSize: pagination.value.pageSize,
      ranchName: searchObj.value.ranchName,
      ...searchObj.value,
    });

    dataSource.value = res.data.data.records;
    pagination.value.current = res.data.data.pageNumber;
    pagination.value.pageSize = res.data.data.pageSize;
    pagination.value.total = res.data.data.totalItems;
    console.log(res);
  } catch (error) {
    message.error('数据获取失败，请稍后再试');
  }
};
getData();
// 换页操作
const onTableChange = (value) => {
  const { current, pageSize } = value;
  pagination.value.current = current;
  pagination.value.pageSize = pageSize;
  getData();
};

// const dataSource = [
//   {
//     ranchName: '8522',
//     ranchStatus: 1,
//   },
// ];
// 搜索
const handleSearch = async () => {
  pagination.value.current = 1;
  getData();
};
// onSuccess 处理
const onSuccess = () => {
  isOpen.value = false;
  getData();
};
// onCancel 事件
const onCancel = () => {
  isOpen.value = false;
  editUserData.value = {};
};
// 定义选项
const ranchStatusOptions = [
  { label: '全部', value: null },
  { label: '启用', value: 1 },
  { label: '停用', value: 0 },
];
// 设置默认选中项的值
// '2'是'全部'的value
const defaultRanchStatus = ref(null);

// 修改状态
const editStatus = async (editStatusRecord) => {
  try {
    debugger;
    await RanchManage.editRanchStatus(editStatusRecord.ranchId);
    console.log(editStatusRecord.ranchId);
    getData();
    message.success('牧场状态修改成功');
  } catch (error) {
    message.error(error);
  }
};
// 查看参数
const getQueryRecord = async (queryRecord) => {
  console.log(queryRecord.ranchId);
  // debugger;
  router.push({ path: '/base-manage/ranch-manage/queryRanch', query: { ranchId: queryRecord.ranchId } });
};

// 重置按钮
const handleReset = async () => {
  pagination.value.current = 1;
  await searchRef.value.resetFields();
  getData();
};
// 表格列的配置
const columns = [
  {
    title: '牧场名称',
    dataIndex: 'ranchName',
    key: 'ranchName',
  },
  {
    title: '状态',
    dataIndex: 'ranchStatus',
    key: 'ranchStatus',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];

// 新增牧场页面
const handleAddRanch = () => {
  router.push({ path: '/base-manage/ranch-manage/AddRanchForm' });
};
</script>
<style>
/* 为表单项添加样式 */
.statusForm {
  width: 184px; /* 使选择框宽度与表单宽度一致 */
}
</style>
